<script setup lang="ts">
  import { HModal } from '@/components/common'
  import { ref, watch } from 'vue'
  import HButton from '../../../../common/button/HButton.vue'
  import { ElMessage } from 'element-plus'
  import { peddingOrder } from '@/api/order'

  const props = defineProps<{
    modelValue: boolean
    isBatch: boolean
    selettion: Array<string>
  }>()

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'update'): void
  }>()

  const visible = ref(false)
  const saveLoading = ref(false)
  const form = ref<{
    // cancelReason: 2 | 3
    // remark: string
    workIds: Array<string>
    // approach: 1 | 2 | 3 | 4
  }>({
    // cancelReason: 2,
    // remark: '',
    workIds: props.selettion,
    // approach: 1,
  })

  const onClose = () => {
    visible.value = false
    emits('update:modelValue', visible.value)
  }

  const onSave = async () => {
    saveLoading.value = true
    const res = await peddingOrder({idList: form.value.workIds})
    if (res.data.isError)
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: res.data.success ? 'success' : 'error',
        duration: 3000,
      })
    if (res.data.success) {
      emits('update')
      onClose()
    }
    saveLoading.value = false
  }

  watch(
    props,
    (value) => {
      visible.value = value.modelValue
      form.value.workIds = value.selettion
    },
    { immediate: true },
  )
</script>

<template>
  <div>
    <HModal v-model="visible" @close="onClose" width="auto">
      <template #header>
        <h3>确认挂起/解除工单</h3>
      </template>
      <div v-loading="saveLoading" element-loading-text="加载中...">
        <div v-if="props.isBatch" class="title">
          <span>当前选中&nbsp;</span>
          <span class="num">{{ props.selettion.length }}</span>
          <span>&nbsp;个工单进行批量操作！</span>
        </div>
        <!-- <el-form ref="formRef" :model="form" class="form_content">
          <el-form-item label="取消原因">
            <el-select placeholder="请选择取消原因" v-model="form.cancelReason">
              <el-option :value="2" label="无需上门" />
              <el-option :value="3" label="保外" />
            </el-select>
          </el-form-item>
          <el-form-item label="处理方式" v-if="form.cancelReason === 2">
            <el-select v-model="form.approach" placeholder="请选择处理方式">
              <el-option :value="1" label="电话/视频" />
              <el-option :value="2" label="客户取消" />
              <el-option :value="3" label="重复订单" />
              <el-option :value="4" label="过保" />
            </el-select>
          </el-form-item>
          <el-form-item label="处理备注">
            <el-input
              v-model="form.remark"
              maxlength="200"
              placeholder="请输入处理备注"
              show-word-limit
              type="textarea"
              resize="both"
            />
          </el-form-item>
        </el-form> -->
      </div>
      <template #footerRight>
        <HButton is-modal type="primary" @click="onSave">确认</HButton>
        <HButton is-modal @click="onClose">取消</HButton>
      </template>
    </HModal>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-textarea) {
    .el-textarea__inner {
      min-height: 75px !important;
      max-height: 200px !important;
      min-width: 250px !important;
      max-width: 450px !important;
      overflow: hidden;
    }
  }

  .title {
    margin-bottom: 20px;

    .num {
      color: $secondColor2;
    }
  }

  .form_content {
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    .form_item {
      margin-bottom: 12px;
    }

    .validate_fail {
      transition: all 0.4s;
      margin-bottom: 22px;
    }
  }
</style>
